<template>
  <div>
    <div class="titleBox">
      <div class="title">
        <span class="titleContent">{{ title }}</span
        ><span class="statisticalTime">统计时间：2024-03</span>
      </div>
      <div>
        <el-button type="primary" link @click="getLookDetail">
          查看详情 <el-icon><ArrowRight /></el-icon
        ></el-button>
      </div>
    </div>
    <!-- 高倍病例覆盖病组 高倍病例覆盖科室-->
    <el-dialog title="高倍病例覆盖科室" :modelValue="lookDetail" width="65%">
      <avue-crud ref="crud" :option="option">
        <template #search>
          <div class="searchList">
             <el-form :inline="true">
            <el-form-item label="科室:">
              <el-select placeholder="请选择科室" style="width: 200px">
                <el-option label="急诊" value="1"> </el-option>
                <el-option label="骨科" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序:">
              <el-select placeholder="排序" style="width: 200px">
                <el-option label="占高倍病例数" value="1"> </el-option>
                <el-option label="出院人次" value="2"> </el-option>
              </el-select>
              <el-radio-group v-model="radio" style="margin-left: 10px">
                <el-radio :label="3">升序</el-radio>
                <el-radio :label="6">降序</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div>
            <el-button>查询</el-button>
            <el-button>重置</el-button>
            <el-button class="exportList">导出</el-button>
          </div>
          </div>
         
        </template>
      </avue-crud>
    </el-dialog>
    <div
      class="active-users card"
      style="width: 100%; height: 200px"
      ref="container"
    ></div>
  </div>
</template>
<script setup>
import {
  onBeforeUnmount,
  onMounted,
  ref,
  onActivated,
  onDeactivated,
  reactive,
  computed,
} from "vue"
import * as echarts from "echarts"

let chart = null
function resize() {
  chart.resize()
}
const props = defineProps(["title", "lookDetail", "option"])
const emit = defineEmits(["update:lookDetail"])

const lookDetail = computed({
  get() {
    return props.lookDetail
  },
  set(newVal) {
    emit("update:lookDetail", newVal)
  },
})
const getLookDetail = () => {
  lookDetail.value = true
}
const container = ref(null)
const zhanbiData = reactive([25.0, 25.0, 16.67, 16.67, 12.25])
const initChart = () => {
  if (chart == null) {
    chart = echarts.init(container.value)
  }
  chart.setOption({
    grid: {
      top: "35px",
      left: "100px",
      right: "30px",
      bottom: "25px",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        var result = ""
        var dotaDta =
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1E90FF"></span>'

        // var dotaDta2 =
        //   '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(250, 104, 7)"></span>'
        result += `<span style="margin-left:5px;font-weight:900;color:#000;">${dotaDta}${params[0].name}:</span><span style="margin-left:5px;font-size:12px;">高倍病例数:${params[0].data}</span><span style="margin-left:5px;font-size:12px;">占比:${params[1].data}%</span>`

        //   "</br>" +
        //   dotaDta +
        //   "高倍病例数量:" +
        //   params[0].data +
        //   "</br>" +
        //   dotaDta2 +
        //   "占医疗总费用比例:" +
        //   params[1].data +
        //   "%"
        return result
      },
    },
    xAxis: {
      show: false,
      axisLabel: {
        formatter: "{value} 位",
        show: true,
      },
      splitLine: { show: false },
      axisLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true, // 倒叙
        axisLabel: {
          color: "#1E90FF",
        },
        axisLine: {
          show: false, // 轴线
        },
        axisLabel: {
          color: "#000", // 设置文字颜色为红色
        },
        axisTick: {
          show: false, // 刻度线
        },
        data: ["呼吸内科", "妇产科", "消化内科", "老年医学科", "骨科一组"],
      },
      {
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        // 设置第二个y轴上文字的颜色与字号
        axisLabel: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "Echarts",
        type: "bar",

        barWidth: 15,
        showBackground: true,

        backgroundStyle: {
          // 柱子背景设置

          color: "#b3d8ff",
        },
        itemStyle: {
          borderRadius: [0, 10, 10, 0],

          color: "#409EFF",
        },
        data: [6, 4, 4, 3, 3],
      },
      {
        data: [25.0, 25.0, 16.67, 16.67, 12.25],
      },
    ],
  })
  window.addEventListener("resize", resize)
}

onMounted(() => {
  initChart()
})
</script>
<style scoped>
.avue-crud__header {
  min-height: 0 !important;
}
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  position: relative;
  padding-left: 10px;
}
.title::before {
  background: #108ee9;
  height: 100%;
  width: 5px;
  content: "";
  position: absolute;
  left: 0;
}
.titleContent {
  font-size: 18px;
  font-weight: 900;
}
.statisticalTime {
  font-size: 14px;
  color: rgb(93, 92, 102);
  /* color: rgb(250, 104, 7); */
  margin-left: 10px;
}
.searchList{
  display: flex;
 
  justify-content: space-between;
}
.exportList{
  margin-left: 70px;
}
</style>
